<h1><code ng:non-bindable="">ngReadonly</code>
<span class="hint">(directive in module <code ng:non-bindable="">ng</code>
)</span>
</h1>
<div><a href="http://github.com/angular/angular.js/edit/master/src/ng/directive/booleanAttrs.js" class="improve-docs btn btn-primary">Improve this doc</a><h2 id="Description">Description</h2>
<div class="description"><p>The HTML specs do not require browsers to preserve the special attributes such as readonly.
(The presence of them means true and absence means false)
This prevents the angular compiler from correctly retrieving the binding expression.
To solve this problem, we introduce the <code>ngReadonly</code> directive.</p></div>
<h2 id="Usage">Usage</h2>
<div class="usage">as attribute<pre class="prettyprint linenums">&lt;INPUT ng-readonly
     expression="{string}"&gt;
   ...
&lt;/INPUT&gt;</pre>
<h4 id="parameters">Parameters</h4><table class="variables-matrix table table-bordered table-striped"><thead><tr><th>Param</th><th>Type</th><th>Details</th></tr></thead><tbody><tr><td>expression</td><td><a href="" class="label type-hint type-hint-string">string</a></td><td><p>Angular expression that will be evaluated.</p></td></tr></tbody></table></div>
<h2 id="Example">Example</h2>
<div class="example"><h4>Source</h2>
<div source-edit="" source-edit-deps="angular.js" source-edit-html="index.html-96" source-edit-css="" source-edit-js="" source-edit-unit="" source-edit-scenario="scenario.js-97"></div>
<div class="tabbable"><div class="tab-pane" title="index.html">
<pre class="prettyprint linenums" ng-set-text="index.html-96" ng-html-wrap=" angular.js"></pre>
<script type="text/ng-template" id="index.html-96">
  Check me to make text readonly: <input type="checkbox" ng-model="checked"><br/>
  <input type="text" ng-readonly="checked" value="I'm Angular"/>
</script>
</div>
<div class="tab-pane" title="End to end test">
<pre class="prettyprint linenums" ng-set-text="scenario.js-97"></pre>
<script type="text/ng-template" id="scenario.js-97">
  it('should toggle readonly attr', function() {
    expect(element('.doc-example-live :text').prop('readonly')).toBeFalsy();
    input('checked').check();
    expect(element('.doc-example-live :text').prop('readonly')).toBeTruthy();
  });
</script>
</div>
</div><h2>Demo</h4>
<div class="well doc-example-live animator-container" ng-embed-app="" ng-set-html="index.html-96" ng-eval-javascript=""></div></div>
</div>
